$(function () {
    // 获取页面内容;
    function getLinks() {
        $.ajax({
            type: "get",
            url: "admin/links",
            success: function (res) {
                // console.log(res);
                let arr = [];
                res.data.forEach((item) => {
                    arr.push(` <tr>
                    <td>${item.id}</td>
                    <td>
                        <div class='bg'>
                            <img src="
                                http://localhost:8888/uploads/${item.linkicon}" />
                        </div>
                    </td>
                    <td>${item.linkname}</td>
                    <td>${item.linkurl}</td>
                    <td>${item.linkdesc}</td>
                    <td>
                        <button
                            data-id='${item.id}'
                            type='button'
                            class='layui-btn layui-btn-xs edit'
                        >
                            编辑
                        </button>
                        <button
                            data-id='${item.id}'
                            type='button'
                            class='
                      layui-btn layui-btn-xs layui-btn-danger
                      delete
                  '
                        >
                            删除
                        </button>
                    </td>
                </tr>`);
                });
                $("tbody").html(arr.join(""));
            },
        });
    }
    getLinks();
    //添加链接
    let $addbtn = $("#add-link");
    $addbtn.click(function () {
        let index = layer.open({
            type: 1,
            title: "添加友情链接",
            content: $("#add-form-tpl").html(),
            area: ["500px", "350px"],
        });
        //上传图片;
        $("#urlIcon").click(function () {
            // console.log(1);
            $("#linkFile").trigger("click");
        });
        $("#linkFile").change(function (e) {
            let fileUrl = URL.createObjectURL(e.target.files[0]);
            $("#preIcon").attr("src", fileUrl);
        });
        //提交
        $("#add-form").submit(function () {
            let fd = new FormData(this);
            $.ajax({
                type: "post",
                url: "admin/links",
                data: fd,
                processData: false,
                contentType: false,
                success: function (req, res) {
                    if (res.status === 0) {
                        layer.close(index);
                        getLinks();
                    }
                },
            });
        });
    });
    // 编辑
    $(".layui-table tbody").on("click", ".edit", function (e) {
        let id = $(e.target).data("id");
        // console.log(id);
        $.ajax({
            type: "get",
            url: "admin/links/" + id,
            success: function (res) {
                let index = layer.open({
                    type: 1,
                    title: "编辑友情链接",
                    content: $("#edit-form-tpl").html(),
                    area: ["500px", "350px"],
                });
                $("#preIcon").attr(
                    "src",
                    "http://localhost:8888/uploads/" + res.data.linkicon
                );
                // 初始化表单数据
                delete res.data.linkicon;
                // console.log(res.data);
                let form = layui.form;
                form.val("editForm", res.data);
                // 上传图片
                $("#urlIcon").click(function () {
                    $("#linkFile").click();
                });
                let file = null;
                $("#linkFile").change(function (e) {
                    let fileUrl = URL.createObjectURL(e.target.files[0]);
                    file = e.target.files[0];
                    $("#preIcon").attr("src", fileUrl);
                });
                //提交
                $("#edit-form").submit(function () {
                    e.preventDefault();
                    let fd = new FormData(this);
                    if (file) {
                        fd.append("linkicon", file);
                    }
                    $.ajax({
                        type: "put",
                        url: "admin/links/" + id,
                        data: fd,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            if (res.status === 0) {
                                layer.close(index);
                                getLinks();
                            }
                        },
                    });
                });
            },
        });
    });
    //删除
    $("tbody").on("click", ".delete", function (e) {
        let id = $(e.target).data("id");
        layer.confirm("是否删除？", function (index) {
            $.ajax({
                type: "delete",
                url: "admin/links/" + id,
                success: function (res) {
                    if (res.status === 0) {
                        layer.close(index);
                        getLinks();
                    }
                },
            });
        });
    });
});
